<template>
	<view class="address-container" @click="toggleMask" @touchmove.stop.prevent="stopPrevent">
		<view class="" v-show="showlist">
			<scroll-view class="view-content" scroll-y>
				<view class="adres-list clear-both" v-for="(addr,index) in addressList" :key="index">
					<view class="adress float-l" @tap="checkAddr(addr)">
						<view class="fs16 color3 font-weight text-over adress1">{{addr.city+addr.address}}</view>
						<view class="fs14 color3 text-over adress2">{{addr.name+' '+addr.phone}}</view>
					</view>
					<view class="float-r edit">
						<image src="http://iph.href.lu/40x40" mode="aspectFill" class="edit-img"></image>
						<view class="fs12 colorbc" @tap="edit(addr)">编辑</view>
					</view>
				</view>
			</scroll-view>
			<view class="fs18 colorf font-weight text-center add-btn" @tap="addNewaddress">
				添加地址
			</view>
		</view>
		<view class="" v-show="!showlist">
			<view class="add-list clear-both">
				<view class="float-l fs16 color3 font-weight add-title">联系人</view>
				<view class="float-l fs16 color3 add-info clear-both">
					<input type="text" class="fs16 color3 add-info-t float-l add-info-input add-info-input2" placeholder="请填写姓名"
					 placeholder-class="colorc9" v-model="addr.name" />
					<view class="float-r sex" :class="{'sexact':addr.gender=='先生'}" @tap="addr.gender='先生'">先生</view>
					<view class="float-l sex sex1 " :class="{'sexact':addr.gender=='女士'}" @tap="addr.gender='女士'">女士</view>
				</view>
			</view>
			<view class="add-list clear-both">
				<view class="float-l fs16 color3 font-weight add-title">手机号</view>
				<view class="float-l fs16 color3 add-info clear-both">
					<input type="text" class="fs16 color3 add-info-t float-l add-info-input add-info-t2" placeholder="请输入手机号码"
					 placeholder-class="colorc9" v-model="addr.phone" />
				</view>
			</view>

			<view class="add-list clear-both">
				<view class="float-l fs16 color3 font-weight add-title">所在城市</view>
				<view class="float-l fs16 color3 add-info">{{addr.city}}</view>
			</view>
			<view class="add-list clear-both">
				<view class="float-l fs16 color3 font-weight add-title">收货地址</view>
				<view class="float-l fs16 color3 add-info clear-both" @tap="searchAddress">
					<view class="fs16 colorc9 add-info-t float-l text-over">{{addr.AutoBuilding || addr.AddressAuto || '请点击选择'}}</view>
					<image src="http://iph.href.lu/40x40" mode="aspectFill" class="add-info-img float-r"></image>
				</view>
			</view>
			<view class="add-list clear-both">
				<view class="float-l fs16 color3 font-weight add-title">门牌号</view>
				<view class="float-l fs16 color3 add-info clear-both">
					<input type="text" class="fs16 color3 add-info-t float-l add-info-input add-info-t2" placeholder="详细地址，例：12号楼3层301室"
					 placeholder-class="colorc9" v-model="addr.HouseNumber" />
				</view>
			</view>
			<!-- <view class="add-list2">
				<view class="fs16 color3 font-weight add-list2t">配送范围</view>
				<view class="fs13 color9">上海申嘉湖高速以北，绕城高速以南，外环高速以西，沈海 高速以东区域及嘉定行政区免费配送，超出区域按30元/个 收取运费，迪斯尼区域暂不支持配送。</view>
			</view> -->
			<view class="botm clear-both">
				<!-- <image src="http://iph.href.lu/40x40" mode="aspectFill" class="float-l botm-img"></image> -->
				<switch :checked="addr.IsDefault" @change="addr.IsDefault=1;" style="transform:scale(0.7)" />
				<view class="float-l fs16 color3 font-weight">设为默认地址</view>
				<view class="fs14 colora float-r" @tap="del" v-show="addr.id">删除地址</view>
			</view>
			<view class="fs18 colorf font-weight text-center add-btn" @tap="save">保存地址</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/api/request/index.js'
	import local_userinfo from '@/util/user/local-userinfo.js'
	export default {
		data() {
			return {
				showaddress: false,
				transform: 'translateY(50vh)',
				timer: 0,
				backgroundColor: 'rgba(0,0,0,0.4)',
				showlist: true,

				addr: {
					id: -1,
					city: '上海',
					AddressAuto: '',
					AutoBuilding: '',
					HouseNumber: '',
					IsDefault: '',
					Lat: '',
					Lng: '',
					ShippingCost: '',
					address: '',
					area: '',
					name: '',
					phone: '',
					province: '',
					gender: '先生'
				}
			};
		},
		props: {
			contentHeight: {
				type: Number,
				default: 0
			},
			addressList: {
				type: Array,
				default: []
			},
			confirmorder: {
				type: Boolean,
				default: true
			},
			address: {
				type: Object,
				default: {}
			}
		},
		created() {
			const height = uni.upx2px(this.contentHeight) + 'px';
			this.config = {
				height: height,
				transform: `translateY(${height})`,
				backgroundColor: 'rgba(0,0,0,.4)'
			};
			this.transform = this.config.transform;
		},
		methods: {
			toggleMask() {
				//防止高频点击
				if (this.timer == 1) {
					return;
				}
				this.timer = 1;
				setTimeout(() => {
					this.timer = 0;
				}, 500);

				if (this.show) {
					this.transform = this.config.transform;
					this.backgroundColor = 'rgba(0,0,0,0)';
					setTimeout(() => {
						this.show = false;
					}, 200);
					return;
				}

				this.show = true;
				//等待mask重绘完成执行
				setTimeout(() => {
					this.backgroundColor = this.config.backgroundColor;
					this.transform = 'translateY(0px)';
				}, 10);
			},
			searchAddress(){
				
			},
			checkAddr(addr) {
				if (this.confirmorder)
					this.$emit('choosethisaddr', addr);
			},
			addNewaddress() {
				if (this.address && this.address.title) {
					this.addr = {
						city: '上海',
						AddressAuto: this.address.details,
						AutoBuilding: this.address.title,
						HouseNumber: '',
						IsDefault: 0,
						Lat: this.address.lat,
						Lng: this.address.lng,
						ShippingCost: 0,
						address: '',
						area: this.address.district,
						name: '',
						phone: this.address.phone,
						province: this.address.province,
						gender: '先生'
					}
				}

				this.showlist = false;
			},
			edit(addr) {
				this.showlist = false;
				addr.gender = addr.gender ? addr.gender : '先生'
				addr.lastused = ''
				this.addr = addr;
			},
			//防止冒泡和滚动穿透
			stopPrevent() {},
			del() {
				let that = this;
				let go = () => {

					let userSession = local_userinfo.getUserinfo();
					let sessionKey = userSession ? userSession.sessionid : '';
					let city = '上海';
					uni.showLoading({
						title: '正在加载模块...',
						mask: true
					})
					request.get({
							data: {
								city: city,
								rediskey: sessionKey,
								showtype: '',
								c: 'AddressController',
								m: 'Del',
								addressId: that.addr.id
							}
						})
						.then(res => {
							if (res.Status == "ok") {
								that.showlist = true;
								that.$emit('getallAddress');
							} else {
								uni.showModal({
									title: res.Msg,
									showCancel: false
								})
							}
						})
						.catch(error => {
							console.error(error)
						});
				}

				uni.showModal({
					title: '提示',
					content: '是否删除此地址？',
					success: (res) => {
						if (res.confirm) go()
					}
				})
			},
			save() {
				let that = this;

				let userSession = local_userinfo.getUserinfo();
				that.addr.name = trim(that.addr.name)
				that.addr.phone = trim(that.addr.phone)
				that.addr.HouseNumber = trim(that.addr.HouseNumber)
				if (!that.addr.name) return uni.showToast({
					title: '请选择收货人信息',
					icon: 'none'
				})
				if (!/^1[3456789]\d{9}$/.test(that.addr.phone)) return uni.showToast({
					title: '请输入收货人手机号',
					icon: 'none'
				})
				if (!that.addr.AddressAuto) return uni.showToast({
					title: '请选择配送地址',
					icon: 'none'
				})
				if (!trim(that.addr.HouseNumber)) return uni.showToast({
					title: '请输入门牌号（例：12号楼3层301室）',
					icon: 'none'
				})
				let address = that.addr.AddressAuto + that.addr.HouseNumber + `(${that.addr.AutoBuilding})`;
				that.addr.address = address;
				let params = {
					c: 'AddressController',
					m: that.addr.id ? 'Update' : 'Add',
					rediskey: userSession.sessionid,
					city: '上海',
					addressinfo: JSON.stringify(that.addr),
					addressId: that.addr.id
				}
				uni.showLoading({
					mask: true,
					title: '请稍等...'
				});
				request.post({
						data: params,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
					})
					.then(res => {
						if (res.Status == "ok") {
							that.showlist = true;
							that.$emit('getallAddress');
						} else {
							uni.showModal({
								title: res.Msg,
								showCancel: false
							})
						}
					})
					.catch(error => {
						console.error(error)
					});
			}
		}
	}

	function trim(str) {
		return str.replace(/(^\s*)|(\s*$)/g, "");
	}
</script>

<style lang="scss">
	.address-container {
		position: fixed;
		left: 0;
		top: 0;
		background: #fff;
		width: 100%;
		height: 100%;
		z-index: 99;

		.view-content {
			height: 100vh;
			padding-bottom: 5vw;
		}

		.adres-list {
			height: 21.8667vw;
			border-bottom: 2upx solid #F2F2F2;
			margin: 0 4.2667vw;

			.adress {
				width: 79vw;
				height: 100%;

				.adress1 {
					margin-top: 4vw;
				}

				.adress2 {
					margin-top: 2.667vw;
				}
			}

			.edit {
				width: 8vw;
				margin-top: 4.5334vw;

				.edit-img {
					width: 8vw;
					height: 8vw;
					display: block;
					margin-bottom: 1.8667vw;
				}
			}
		}

		.add-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 9999;
			height: 13.8667vw;
			line-height: 13.8667vw;
			background: #00449F;
		}

		.add-list {
			border-bottom: 2upx solid #F2F2F2;
			margin: 0 4.2667vw;
			height: 13.8667vw;
			line-height: 13.8667vw;

			.add-title {
				height: 100%;
				width: 17.1vw;
				white-space: nowrap;
			}

			.add-info {
				width: 70vw;
				margin-left: 3.7334vw;
				height: 100%;

				.add-info-t {
					width: 62vw;
				}

				.add-info-t2 {
					width: 70vw;
				}

				.add-info-img {
					width: 5.8667vw;
					height: 5.8667vw;
					margin-top: 4vw;
				}

				.add-info-input {
					height: 5.8667vw;
					margin-top: 4vw;
				}

				.add-info-input2 {
					width: 21.334vw;
				}

				.sex {
					height: 7.4667vw;
					width: 18.667vw;
					text-align: center;
					line-height: 7.4667vw;
					color: #BCBCBC;
					border: 2upx solid #E8E8E8;
					border-radius: 1.0667vw;
					margin-top: 3.2vw;
				}

				.sex1 {
					margin-left: 7.5vw;
				}

				.sexact {
					color: #00449F;
					border: 2upx solid #00449F;
				}
			}
		}

		.add-list2 {
			border-bottom: 2upx solid #F2F2F2;
			margin: 0 4.2667vw;
			padding: 4.2667vw 0 3.7334vw 0;

			.add-list2t {
				margin-bottom: 1.8667vw;
			}
		}

		.botm {
			height: 5.8867vw;
			line-height: 5.8867vw;
			margin: 0 4.2667vw;
			margin-top: 5.1vw;

			.botm-img {
				width: 5.8667vw;
				height: 5.8667vw;
				display: block;
				margin-right: 1.2vw;
			}
		}

		.add-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 9999;
			height: 13.8667vw;
			line-height: 13.8667vw;
			background: #00449F;
		}
	}
</style>
